<template>
<div class="home">
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-8">
                <h1 class="mb-4">最新文章</h1>
                <div v-if="loading" class="text-center">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>

                </div>

                <div v-else-if="error" class="alert alert-danger">

                    {{ error }}

                </div>

                <div v-else>

                    <div v-if="articles && articles.length > 0">

                        <div v-for="article in articles" :key="article.id" class="card mb-4">

                            <div class="card-body">

                                <h5 class="card-title">

                                    <router-link :to="'/article/' + article.id">{{ article.title }}</router-link>

                                </h5>

                                <h6 class="card-subtitle mb-2 text-muted">

                                    <router-link :to="'/category/' + article.categoryId" class="text-decoration-none">

                                        {{ article.categoryName }}

                                    </router-link>

                                    <span class="ms-2">{{ formatDate(article.createdAt) }}</span>

                                    <span class="ms-2">浏览: {{ article.viewCount }}</span>

                                </h6>

                                <p class="card-text">{{ article.summary }}</p>

                                <router-link :to="'/article/' + article.id" class="btn btn-primary">阅读更多</router-link>

                            </div>

                        </div>

                        <!-- 分页 -->

                        <Pagination :pagination="pagination" :routeName="'ArticleListPaged'" />

                    </div>

                    <div v-else class="alert alert-info">

                        暂无文章，请稍后再来查看。

                    </div>

                </div>

            </div>

            <div class="col-md-4">

                <div class="card mb-4">

                    <div class="card-header">

                        <h5 class="mb-0">最新文章</h5>

                    </div>

                    <div class="card-body">

                        <ul v-if="latestArticles && latestArticles.length > 0" class="list-group list-group-flush">

                            <li v-for="article in latestArticles" :key="article.id" class="list-group-item px-0">

                                <router-link :to="'/article/' + article.id" class="text-decoration-none">

                                    {{ article.title }}

                                </router-link>

                                <small class="text-muted d-block">{{ formatDate(article.createdAt) }}</small>

                            </li>

                        </ul>

                        <div v-else class="text-muted">暂无最新文章</div>

                    </div>

                </div>

                <div class="card">

                    <div class="card-header">

                        <h5 class="mb-0">分类</h5>

                    </div>

                    <div class="card-body">

                        <ul v-if="categories && categories.length > 0" class="list-group list-group-flush">

                            <li v-for="category in categories" :key="category.id" class="list-group-item px-0">

                                <router-link :to="'/category/' + category.id" class="text-decoration-none">

                                    {{ category.name }}

                                </router-link>

                            </li>

                        </ul>

                        <div v-else class="text-muted">暂无分类</div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>
</template>

<script>
import {
    computed,
    onMounted,
    watch
} from 'vue'
import {
    useStore
} from 'vuex'
import {
    useRoute
} from 'vue-router'
import Pagination from '../components/Pagination.vue'

export default {
    name: 'HomePage',
    components: {
        Pagination
    },

    props: {
        pageNumber: {
            type: Number,
            default: 1
        }
    },

    setup(props) {
        const store = useStore()
        const route = useRoute()
        const articles = computed(() => store.state.articles)
        const categories = computed(() => store.state.categories)
        const latestArticles = computed(() => store.state.latestArticles)
        const loading = computed(() => store.state.loading)
        const error = computed(() => store.state.error)
        const pagination = computed(() => store.state.pagination)

        const formatDate = (dateString) => {
            if (!dateString) return ''
            const date = new Date(dateString)
            return date.toLocaleDateString('zh-CN', {

                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            })

        }

        const fetchData = async () => {
            const pageNumber = props.pageNumber || 1
            if (route.name === 'ArticleListPaged') {
                // 分页获取文章
                const pageData = await store.dispatch('fetchArticlesPaged', pageNumber)
                if (pageData) {
                    store.commit('SET_PAGINATION', pageData)
                }

            } else {

                // 获取首页数据

                await store.dispatch('fetchHomeData')

            }

        }

        onMounted(() => {

            fetchData()

        })

        watch(() => props.pageNumber, () => {

            fetchData()

        })

        return {
            articles,
            categories,
            latestArticles,
            loading,
            error,
            pagination,
            formatDate
        }
    }
}
</script>

<style scoped>
.card-title a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
}

.card-title a:hover {
    color: #0d6efd;
}

.card-subtitle a {
    color: #6c757d;
}

.card-subtitle a:hover {
    color: #0d6efd;
}

.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-text {

    color: #555;

    line-height: 1.6;

}

.btn-primary {

    background-color: #0d6efd;

    border-color: #0d6efd;

}

.btn-primary:hover {

    background-color: #0b5ed7;

    border-color: #0a58ca;

}

.list-group-item {

    border: none;

    padding: 0.5rem 0;

}

.list-group-item a {

    color: #495057;

    font-weight: 500;

}

.list-group-item a:hover {

    color: #0d6efd;

}

.card-header {

    background-color: #f8f9fa;

    border-bottom: 1px solid rgba(0, 0, 0, 0.125);

    font-weight: 600;

}
</style>
